<template>
    <div
            :class="{ 'site-sidebar--fold': sidebarFold }"
            class="site-wrapper"
            element-loading-text="拼命加载中"
            v-loading.fullscreen.lock="loading">
        <template v-if="!loading">
            <main-navbar/>
            <main-sidebar/>
            <div :style="{ 'min-height': documentClientHeight + 'px' }" class="site-content__wrapper">
                <main-content/>
            </div>
        </template>
    </div>
</template>

<script>
    import MainNavbar from './main-navbar'
    import MainSidebar from './main-sidebar'
    import MainContent from './main-content'

    export default {
        data() {
            return {
                loading: true
            }
        },
        components: {
            MainNavbar,
            MainSidebar,
            MainContent
        },
        computed: {
            documentClientHeight: {
                get() {
                    return this.$store.state.common.documentClientHeight
                },
                set(val) {
                    this.$store.commit('common/updateDocumentClientHeight', val)
                }
            },
            sidebarFold: {
                get() {
                    return this.$store.state.common.sidebarFold
                }
            },
            userId: {
                get() {
                    return this.$store.state.user.id
                },
                set(val) {
                    this.$store.commit('user/updateId', val)
                }
            },
            userName: {
                get() {
                    return this.$store.state.user.name
                },
                set(val) {
                    this.$store.commit('user/updateName', val)
                }
            }
        },
        created() {
            this.getUserInfo()
        },
        mounted() {
            this.resetDocumentClientHeight()
        },
        methods: {
            // 重置窗口可视高度
            resetDocumentClientHeight() {
                this.documentClientHeight = document.documentElement['clientHeight']
                window.onresize = () => {
                    this.documentClientHeight = document.documentElement['clientHeight']
                }
            },
            // 获取当前管理员信息
            getUserInfo() {
                this.$http({
                    url: this.$http.adornUrl('/sys/user/info'),
                    method: 'get',
                    params: this.$http.adornParams()
                }).then(({data}) => {
                    this.loading = false
                    this.userId = data.userId
                    this.userName = data.username
                })
            }
        }
    }
</script>
